<!-- pages/baoyang/dingdan/dingdan.vue -->
<template>
  <view class="page-container">
    <!-- 导航栏 -->
    <uni-nav-bar title="确认订单" :border="false" />

    <!-- 主内容区域 -->
    <scroll-view class="content-wrapper" scroll-y>
      <!-- 步骤指示器 -->
      <view class="step-indicator">
        <view 
          v-for="(step, index) in steps"
          :key="index"
          :class="['step-item', { active: currentStep === index }]"
        >
          <text class="step-number">{{ index + 1 }}</text>
          <text class="step-title">{{ step }}</text>
        </view>
      </view>

      <!-- 服务信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <uni-icons type="shop" size="18" color="#333" />
          <text class="shop-name">伟业汽车维修厂（人民路店）</text>
        </view>
        <view class="card-body">
          <uni-icons type="location" size="16" color="#666" />
          <text class="shop-address">山阳区人民中路32号</text>
        </view>
      </view>

      <!-- 用户信息模块 -->
      <view class="info-section">
        <view class="section-header">
          <text class="title">用户信息</text>
          <text class="edit-btn">编辑</text>
        </view>
        <view class="info-content">
          <view class="info-item">
            <uni-icons type="person" size="16" color="#666" />
            <text class="info-text">张三</text>
          </view>
          <view class="info-item">
            <uni-icons type="phone" size="16" color="#666" />
            <text class="info-text">18895039309</text>
          </view>
        </view>
      </view>

      <!-- 车辆信息模块 -->
      <view class="info-section">
        <view class="section-header">
          <text class="title">车辆信息</text>
          <text class="edit-btn">更换车辆</text>
        </view>
        <view class="car-info">
          <image src="/static/car-icon.png" class="car-icon" />
          <text class="car-number">奔驰FWE4/豫A98FHJ</text>
        </view>
      </view>

      <!-- 服务商品列表 -->
      <view class="service-list">
        <view class="list-header">
          <text class="title">服务产品</text>
          <text class="count">共选择{{ selectedServices.length }}项服务</text>
        </view>
        <view 
          v-for="(item, index) in selectedServices"
          :key="index"
          class="service-item"
        >
          <text class="service-name">{{ item.name }}</text>
          <text class="service-price">￥{{ item.price }}</text>
        </view>
      </view>

      <!-- 优惠信息 -->
      <view class="coupon-section">
        <view class="coupon-header">
          <text class="title">代金券/优惠券</text>
          <text class="status">暂无</text>
        </view>
      </view>

      <!-- 备注信息 -->
      <view class="remark-section">
        <textarea
          v-model="remark"
          placeholder="请输入备注信息（选填）"
          class="remark-input"
          auto-height
        />
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer-bar">
      <view class="price-info">
        <text class="label">合计：</text>
        <text class="total-price">￥{{ totalPrice }}</text>
      </view>
      <button class="submit-btn" @click="handleSubmit">提交订单</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

// 模拟数据
const currentStep = ref(0)
const steps = reactive(['预约服务', '支付订单', '门店服务'])
const remark = ref('')
const selectedServices = reactive([
  { name: '小保养套餐1（合成机油+机滤）', price: 199 },
  { name: '小保养套餐1（合成机油+机滤）', price: 199 },
  { name: '小保养套餐1（合成机油+机滤）', price: 199 }
])

// 计算属性
const totalPrice = computed(() => {
  return selectedServices.reduce((sum, item) => sum + item.price, 0).toFixed(2)
})

// 提交订单
const handleSubmit = () => {
  uni.showLoading({ title: '提交中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.navigateTo({ url: '/pages/baoyang/pay/pay' })
  }, 1500)
}
</script>

<style lang="scss">
.page-container {
  background: #f5f5f5;
  min-height: 100vh;
  
  .content-wrapper {
    height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
    padding: 20rpx 30rpx 140rpx;
  }
}

.step-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
  
  .step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      top: 14rpx;
      left: 50%;
      right: -50%;
      height: 4rpx;
      background: #ddd;
      z-index: 1;
    }
    
    &:last-child::after {
      display: none;
    }
    
    &.active {
      .step-number {
        background: #FF5A5F;
        color: #fff;
      }
      .step-title {
        color: #FF5A5F;
      }
    }
  }
  
  .step-number {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background: #ddd;
    text-align: center;
    line-height: 40rpx;
    font-size: 24rpx;
    margin-bottom: 12rpx;
    position: relative;
    z-index: 2;
  }
  
  .step-title {
    font-size: 28rpx;
    color: #999;
  }
}

.info-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .shop-name {
      font-size: 32rpx;
      color: #333;
      margin-left: 12rpx;
    }
  }
  
  .shop-address {
    font-size: 28rpx;
    color: #666;
    margin-left: 12rpx;
  }
}

.info-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 32rpx;
      color: #333;
    }
    
    .edit-btn {
      color: #FF5A5F;
      font-size: 28rpx;
    }
  }
  
  .info-content {
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .info-text {
        font-size: 28rpx;
        color: #666;
        margin-left: 12rpx;
      }
    }
  }
  
  .car-info {
    display: flex;
    align-items: center;
    
    .car-icon {
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
    }
    
    .car-number {
      font-size: 32rpx;
      color: #333;
    }
  }
}

.service-list {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .list-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 32rpx;
      color: #333;
    }
    
    .count {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .service-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
    
    .service-name {
      font-size: 28rpx;
      color: #666;
    }
    
    .service-price {
      font-size: 28rpx;
      color: #FF5A5F;
    }
  }
}

.coupon-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .coupon-header {
    display: flex;
    justify-content: space-between;
    
    .title {
      font-size: 32rpx;
      color: #333;
    }
    
    .status {
      color: #999;
    }
  }
}

.remark-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .remark-input {
    width: 100%;
    min-height: 120rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.06);
  
  .price-info {
    display: flex;
    align-items: baseline;
    
    .label {
      font-size: 28rpx;
      color: #666;
    }
    
    .total-price {
      font-size: 36rpx;
      color: #FF5A5F;
      font-weight: 600;
    }
  }
  
  .submit-btn {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: #fff;
    border-radius: 48rpx;
    padding: 0 60rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
  }
}
</style>